<template>
  <!-- http://www.todolist.cn/ -->
  <div id="app">
    <hr>
    <div id="todolist">
        <input type="text" v-model="todo" @keydown="doAdd($event)">
        <button @click="doAdd()">+增加</button>


        <h3>进行中</h3>
        <ul v-for="(item,key) in list" v-if="!item.checked">
          <li>
            <!-- v-model  双向数据绑定 -->
            <input type="checkbox" v-model="item.checked" @change="saveList()"/> {{item.title}} --- <button @click="removeData(key)">删除</button>
          </li>
        </ul>

        <h3>已完成</h3>
        <ul class="finish" v-for="(item,key) in list" v-if="item.checked" v-model="item.checked">
          <li>
            <input type="checkbox" v-model="item.checked" @change="saveList()"/> {{item.title}} --- <button @click="removeData(key)">删除</button>
          </li>
        </ul>

        <button @click="getList()">获取list的值</button>
        <button @click="getList()">获取list的值</button>
    </div>

    <hr>
    <div id="components-demo">
      <!-- 组件的使用3: 在模板中使用 -->
      <v-home></v-home>
      --------------------------组件示例分割线---------------------------
      <v-news></v-news>
    </div>
   
  </div>
</template>

<script>
// 封装模块方法,不直接使用localStorage操作,因为代码显得不是非常clean
import storage from './model/storage.js';

// 组件的使用1: 引入组件
import Home from './components/Home.vue';
import News from './components/News.vue';

export default {
  name: 'app',
  data () {
    return {
      todo:'',
      list:[
        {
          title:'录制vue.js',
          checked: true
        },
        {
          title:'录制node.js',
          checked: false
        }

      ]
    }
  },
  methods:{
    doAdd(e){
        // 获取文本框输入的值
        // 将文本框的值push到list里面
        // this.list.push(this.todo);
          // push一个对象, 点击增加按钮或输入回车都能实现增加效果
        if((typeof(e) == "undefined")||(e.keyCode==13)){
          this.list.push({
          title:this.todo,
          checked:false
          });
          this.todo='';
          // localStorage.setItem('list',JSON.stringify(this.list));
          storage.set('list',this.list);
        };

    },
    removeData(key){
      // 删除, splice, js操作数组的方法
      this.list.splice(key,1);
    },
    getList(){
      console.log(this.list);
    },
    saveList(){
      // checkbox状态改变时,同样放入localStorage
      // localStorage.setItem('list',JSON.stringify(this.list));
      storage.set('list',this.list);
    }
    
  },
  // 生命周期函数  vue页面刷新就会触发
  mounted(){
    // var list=JSON.parse(localStorage.getItem('list'));
    var list=storage.get('list');
    if(list){
      this.list=list;
    }
  },
  components:{
    // 组件的使用2: 挂载组件
    'v-home':Home,
    'v-news':News
  }
}
</script>

<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.finish{
  li{
    background: lightgrey
  }
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
